<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>4399小游戏</title>
    <link rel="stylesheet" href="css/styles.css">
</head>
<body>
    <!-- 通知容器 -->
    <div id="notification" class="notification"></div>

    <header>
        <nav class="main-nav">
            <div class="logo">
                <h1>4399小游戏</h1>
            </div>
            <ul class="nav-links">
                <li><button id="uploadBtn" class="nav-btn">上传游戏</button></li>
                <li><a href="index.html" class="nav-btn active">首页</a></li>
                <li><a href="#" class="nav-btn">小游戏</a></li>
                <li><a href="#" class="nav-btn">游戏音乐</a></li>
                <li class="user-actions">
                    <button id="loginBtn" class="nav-btn">登录</button>
                    <button id="registerBtn" class="nav-btn">注册</button>
                </li>
            </ul>
            <div class="search-box">
                <input type="text" placeholder="搜索游戏...">
                <button>搜索</button>
            </div>
        </nav>
    </header>

    <!-- 上传游戏弹窗 -->
    <div id="uploadModal" class="modal">
        <div class="modal-content">
            <span class="close-button">&times;</span>
            <h2>上传游戏</h2>
            <form id="uploadGameForm">
                <div class="form-group">
                    <label for="gameTitle">游戏标题</label>
                    <input type="text" id="gameTitle" name="title" required>
                </div>
                <div class="form-group">
                    <label for="gameCategory">游戏分类</label>
                    <select id="gameCategory" name="category" required>
                        <option value="">选择分类...</option>
                        <option value="casual">休闲游戏</option>
                        <option value="action">动作游戏</option>
                        <option value="puzzle">益智游戏</option>
                        <option value="strategy">策略游戏</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="gameDescription">游戏描述</label>
                    <textarea id="gameDescription" name="description" rows="4" required></textarea>
                </div>
                <div class="form-group">
                    <label for="gameFile">游戏文件</label>
                    <input type="file" id="gameFile" name="gameFile" required>
                </div>
                <div class="form-group">
                    <label for="gameThumbnail">游戏缩略图</label>
                    <input type="file" id="gameThumbnail" name="thumbnail" accept="image/*" required>
                </div>
                <div class="form-actions">
                    <button type="submit" class="btn-primary">上传游戏</button>
                </div>
            </form>
        </div>
    </div>

    <!-- 登录模态框 -->
    <div id="loginModal" class="modal">
        <div class="modal-content">
            <span class="close-button">&times;</span>
            <h2>用户登录</h2>
            <form id="loginForm">
                <div class="form-group">
                    <label for="loginUsername">用户名</label>
                    <input type="text" id="loginUsername" name="username" required>
                </div>
                <div class="form-group">
                    <label for="loginPassword">密码</label>
                    <input type="password" id="loginPassword" name="password" required>
                </div>
                <div class="form-actions">
                    <button type="submit" class="btn-primary">登录</button>
                    <div class="form-links">
                        <a href="#" id="forgotPassword">忘记密码?</a>
                        <a href="#" id="switchToRegister">没有账号? 立即注册</a>
                    </div>
                </div>
                <div class="social-login">
                    <p>使用社交账号登录</p>
                    <div class="social-buttons">
                        <button type="button" class="social-btn wechat">微信</button>
                        <button type="button" class="social-btn qq">QQ</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- 注册模态框 -->
    <div id="registerModal" class="modal">
        <div class="modal-content">
            <span class="close-button">&times;</span>
            <h2>用户注册</h2>
            <form id="registerForm">
                <div class="form-group">
                    <label for="registerUsername">用户名</label>
                    <input type="text" id="registerUsername" name="username" required>
                </div>
                <div class="form-group">
                    <label for="registerEmail">邮箱</label>
                    <input type="email" id="registerEmail" name="email" required>
                </div>
                <div class="form-group">
                    <label for="registerPassword">密码</label>
                    <input type="password" id="registerPassword" name="password" required>
                </div>
                <div class="form-group">
                    <label for="confirmPassword">确认密码</label>
                    <input type="password" id="confirmPassword" name="confirmPassword" required>
                </div>
                <div class="form-actions">
                    <button type="submit" class="btn-primary">注册</button>
                    <div class="form-links">
                        <a href="#" id="switchToLogin">已有账号? 立即登录</a>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <div class="container">
        <aside class="sidebar">
            <div class="sidebar-section">
                <h3>快速导航</h3>
                <ul>
                    <li><a href="#"><i class="icon">🎮</i>热门游戏</a></li>
                    <li><a href="#"><i class="icon">🌟</i>最新游戏</a></li>
                    <li><a href="#"><i class="icon">🏆</i>排行榜</a></li>
                </ul>
            </div>
            <div class="sidebar-section">
                <h3>游戏分类</h3>
                <ul>
                    <li><a href="pages/casual.html"><i class="icon">🎲</i>休闲游戏</a></li>
                    <li><a href="pages/action.html"><i class="icon">⚔️</i>动作游戏</a></li>
                    <li><a href="pages/puzzle.html"><i class="icon">🧩</i>益智游戏</a></li>
                    <li><a href="pages/adventure.html"><i class="icon">🏃</i>冒险游戏</a></li>
                </ul>
            </div>
        </aside>

        <main>
            <section class="game-categories">
                <h2>游戏分类</h2>
                <div class="category-grid">
                    <a href="pages/casual.html" class="category-card" aria-label="休闲游戏">
                        <img src="images/casual-games.jpg" alt="休闲游戏" loading="lazy">
                        <h3>休闲游戏</h3>
                    </a>
                    <a href="pages/action.html" class="category-card" aria-label="动作游戏">
                        <img src="images/action-games.jpg" alt="动作游戏" loading="lazy">
                        <h3>动作游戏</h3>
                    </a>
                    <a href="pages/puzzle.html" class="category-card" aria-label="益智游戏">
                        <img src="images/puzzle-games.jpg" alt="益智游戏" loading="lazy">
                        <h3>益智游戏</h3>
                    </a>
                    <a href="pages/adventure.html" class="category-card" aria-label="冒险游戏">
                        <img src="images/adventure-games.jpg" alt="冒险游戏" loading="lazy">
                        <h3>冒险游戏</h3>
                    </a>
                </div>
            </section>
        </main>
    </div>

    <!-- 页脚 -->
    <footer class="footer">
        <div class="footer-content">
            <div class="footer-section">
                <h4>关于我们</h4>
                <ul>
                    <li><a href="#">联系我们</a></li>
                    <li><a href="#">关于作者</a></li>
                </ul>
            </div>
            <div class="footer-section">
                <h4>帮助中心</h4>
                <ul>
                    <li><a href="#">常见问题</a></li>
                    <li><a href="#">游戏攻略</a></li>
                    <li><a href="#">意见反馈</a></li>
                </ul>
            </div>
            <div class="footer-section">
                <h4>关注我们</h4>
                <div class="social-links">
                    <a href="https://weixin.qq.com/" target="_blank" rel="noopener" title="关注我们的微信公众号">微信</a>
                    <a href="https://im.qq.com/" target="_blank" rel="noopener" title="加入我们的QQ群">QQ</a>
                </div>
            </div>
        </div>
        <div class="copyright">
            <p>© 2025 4399小游戏. All rights reserved.</p>
        </div>
    </footer>

    <!-- JavaScript 引用 -->
    <script src="js/api.js"></script>
    <script src="js/main.js" defer></script>
    <script src="js/upload.js" defer></script>
</body>
</html> 